import _axios from '@/utils/axios';
import { Button, Checkbox, Col, Divider, Flex, Input, Layout, message, Row, Tabs, theme } from 'antd';
import React, { useState } from 'react';
import ViteLogo from "../../../public/vite.svg";
import styles from './index.module.scss';
import CustomForm from '../../components/customerForm';
import type { TabsProps } from 'antd';
import { WechatOutlined, QqOutlined, GithubOutlined } from '@ant-design/icons';
import { login, register, resetPwd } from '@/api/login';
import { useNavigate } from 'react-router-dom';
const { Content } = Layout;


interface LoginChildProps {
    onOk: (values: any) => void
    onChange: (values: any) => void
}

// 登录组件
const Logon: React.FC<LoginChildProps> = ({ onChange, onOk }) => {
    const initForm = {
        username: "admin",
        password: "admin",
        remember: true
    }

    const loginForm = [{
        name: "username",
        label: "账号",
        placeholder: "请输入账号",
        required: true,
        allowClear: true,
        width: 300
    }, {
        name: "password",
        label: "密码",
        required: true,
        width: 300,
        render: () => (<Input.Password visibilityToggle={true} allowClear placeholder="请输入密码" />)
    }, {
        name: "remember",
        label: "记住我",
        render: () => (<Flex align='center' justify='space-between'>
            <Checkbox checked={initForm.remember}>记住我</Checkbox>
            <Button type="link" size='small' onClick={() => onChange('reset')}>忘记密码</Button>
        </Flex>)
    }]

    return (
        <>
            <h2 className={styles['title']}>登录</h2>
            <CustomForm
                initFormValues={initForm}
                formSize='large'
                showLabel={false}
                formLayout='horizontal'
                formFileds={loginForm}
                onSubmitTxt='登录'
                showCancelBtn={false}
                onSubmit={(values) => {
                    onOk(values);
                }}
            />
            <Row style={{ width: "100%", paddingLeft: "10px" }}>
                <Col>还没有账户？<Button type='link' onClick={() => onChange("regis")}>立即注册</Button></Col>
            </Row>
        </>
    )
}

// 重置密码
const ResetPassword: React.FC<LoginChildProps> = ({ onChange, onOk }) => {
    const ResetPwdForm = [{
        name: "username",
        label: "账号",
        placeholder: "请输入账号",
        required: true,
        allowClear: true,
        width: 300
    }]

    return (
        <> <h2 className={styles['title']}>重置密码</h2>
            <CustomForm
                formSize='large'
                showLabel={false}
                formLayout='horizontal'
                formFileds={ResetPwdForm}
                onSubmitTxt='重置密码'
                showCancelBtn={false}
                onSubmit={(values) => {
                    onOk(values)
                }}
            />
            <Row style={{ width: "100%", paddingLeft: "10px" }}>
                <Col>已有账户？<Button type='link' onClick={() => { onChange('logon') }}>立即登录</Button></Col>
            </Row>
        </>
    )
}

// 注册
const Register: React.FC<LoginChildProps> = ({ onChange, onOk }) => {
    const [read, setRead] = useState(false);
    const initForm = {
        username: "admin",
        password: "admin",
        confirmpassword: "admin",
    }
    const registerForm = [{
        name: "username",
        label: "账号",
        placeholder: "请输入账号",
        required: true,
        allowClear: true,
        width: 300
    }, {
        name: "password",
        label: "密码",
        required: true,
        width: 300,
        render: () => (<Input.Password visibilityToggle={true} allowClear placeholder="请输入密码" />)
    }, {
        name: "confirmpassword",
        label: "确认密码",
        required: true,
        width: 300,
        render: () => (<Input.Password visibilityToggle={true} allowClear placeholder="请输入确认密码" />)
    }, {
        name: "read",
        label: "",
        required: true,
        width: 300,
        render: () => (<Flex align='center' justify='left'>
            <Checkbox checked={read} onChange={(e) => setRead(e.target.checked)}>
                我已阅读并同意
                <Button type="link" size='small' onClick={() => setRead(true)}>用户协议</Button>
            </Checkbox>
        </Flex>)
    }]

    return (
        <>
            <h2 className={styles['title']}>注册</h2>
            <CustomForm
                initFormValues={initForm}
                formSize='large'
                showLabel={false}
                formLayout='horizontal'
                formFileds={registerForm}
                onSubmitTxt='注册'
                showCancelBtn={false}
                onSubmit={(values) => {
                    onOk(values)
                }}
            />
            <Row style={{ width: "100%", paddingLeft: "10px" }}>
                <Col>已有账户？<Button type='link' onClick={() => { onChange('logon') }}>立即登录</Button></Col>
            </Row>
        </>
    )
}

const Login: React.FC = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const [messageApi, contextHolder] = message.useMessage();

    const navgiate = useNavigate();
    const [activeKey, setActiveKey] = useState('logon')
    const onSubmit = (e: any) => {

        const action = activeKey == 'logon' ? login : activeKey == 'regis' ? register : resetPwd;
        action(e).then(re => {
            const str = activeKey == 'logon' ? "登录成功" : activeKey == 'regis' ? "注册成功" : "重置成功";
            messageApi.success(str);
            setTimeout(() => {
                if (activeKey == 'logon') {
                    navgiate("/");
                }
            }, 1000);
            setActiveKey('logon');
            localStorage.setItem('auth', JSON.stringify(re.data));
        })
    }

    const items: TabsProps['items'] = [
        {
            key: 'logon',
            label: 'Tab 1',
            children: <Logon onOk={onSubmit} onChange={(e: any) => onChange(e)} />,
        },
        {
            key: 'reset',
            label: 'Tab 2',
            children: <ResetPassword onOk={onSubmit} onChange={(e: any) => onChange(e)} />,
        },
        {
            key: 'regis',
            label: 'Tab 3',
            children: <Register onOk={onSubmit} onChange={(e: any) => onChange(e)} />,
        },
    ];

    const onChange = (key: string) => {
        setActiveKey(key);
    };

    return (
        <Layout>
            {contextHolder}
            <Content className={styles['content']} style={{
                background: colorBgContainer,
            }}>
                <div className={`${styles['login-container']} ${styles['login-container-boxShadow']}`}>
                    <img src={ViteLogo} />
                    <h2>admin</h2>
                    <Tabs
                        animated
                        renderTabBar={() => <></>}
                        size='small'
                        activeKey={activeKey}
                        items={items}
                        onChange={onChange}
                    />
                    {activeKey == 'logon' && <>
                        <Divider>其他</Divider>
                        <Flex>
                            <WechatOutlined className={styles['iconSize']} />
                            <QqOutlined className={styles['iconSize']} />
                            <GithubOutlined className={styles['iconSize']} />
                        </Flex>
                    </>}
                </div>
            </Content>
        </Layout>
    )
}

export default Login;